// 用户登陆的路由组件

import React from 'react'
import { NavBar, WingBlank, List, InputItem, WhiteSpace, Button } from 'antd-mobile'
import { connect } from 'react-redux'
import { Redirect } from 'react-router-dom'
import Logo from '../../components/logo/logo'
 class Login extends React.Component {
	state = {
		username: '',
		password: '',
	}
	//处理输入框的变化，收集数据到state
	handleChange(name, value) {
		this.setState({ [name]: value })
	}
	//跳转到注册路由
	toRegister = () => {
		this.props.history.replace('/register')
	}
	//登陆
	login = () => {
		console.log("点击实现登陆")
	}
	render() {
		const { redirectTo, msg } = this.props
		if (redirectTo) {
			return <Redirect to={redirectTo} />
		}
		return (
			<div>
				<NavBar>测试项目</NavBar>
				<Logo></Logo>
				<WingBlank>
                {msg ? <p className='error-msg'>{msg}</p> : null}
					<List>
						<InputItem placeholder="输入用户名" onChange={val => this.handleChange('username', val)}>
							用户名：
						</InputItem>
						<WhiteSpace></WhiteSpace>
						<InputItem type="password" placeholder="输入密码" onChange={val => this.handleChange('password', val)}>
							密&nbsp;&nbsp;&nbsp;码:
						</InputItem>
						<WhiteSpace></WhiteSpace>
						<Button type="primary" onClick={this.Login}>
							登&nbsp;&nbsp;&nbsp;陆
						</Button>
						<WhiteSpace></WhiteSpace>
						<Button onClick={this.toRegister}>还没有账号</Button>
					</List>
				</WingBlank>
			</div>
		)
	}
}
export default connect(
    state => state.user
)(Login)